$(function() {
    // 自定义表单验证
    layui.form.verify({
        title: [/^.{1,30}$/, '标题不合法!应该是1-30位字符!'],
    })

    // 获取数据渲染下拉列表内容
    function initCateList() {
        axios.get('/my/cate/list').then(({ data: res }) => {
            if (res.code === 0) {
                // console.log(res);
                const rows = [];
                res.data.forEach(item => {
                    rows.push(`<option value="${item.id}">${item.cate_name}</option>`)
                })
                $('.ql-toolbar select').attr('lay-ignore', '');
                $('[name="cate_id"]').append(rows);
                // 更新渲染select下拉列表
                layui.form.render('select');
                $('.ql-toolbar select').hide();
            }
        })
    }

    initCateList();

    // 配置工具条
    let toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike', 'image'], // toggled buttons
        ['blockquote', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }], // custom button values
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
        [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
        [{ 'direction': 'rtl' }], // text direction

        [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],

        ['clean'] // remove formatting button
    ];
    // 创建一个富文本编辑器
    let quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            toolbar: toolbarOptions
        }
    });

    // 模拟上传封面点击
    $('[ type="button"]').on('click', function() {
        $('#file').click();
    })
    let file = null;
    $('#file').on('change', function(e) {
        let files = e.target.files;
        if (files.length === 0) {
            file = null;
            return;
        }
        file = files[0];
        let imgURL = URL.createObjectURL(file);
        $('#image').prop('src', imgURL);
    })

    // 点击不同的按钮,动态切换state的值
    let state = '已发布';
    $('.btn_cg').on('click', function() {
        state = '草稿';
    })
    $('.btn_pub').on('click', function() {
        state = '已发布';
    })

    $('.form-pub').on('submit', function(e) {
        console.log(e.target);
        e.preventDefault();
        if (!file) {
            return layer.msg('请上传文章封面!')
        }
        // 1.准备FormData格式的请求体数据
        let fd = new FormData();
        let id = $('[name="cate_id"]').val();
        let delta = quill.root.innerHTML;
        fd.append('title', $('[name="title"]').val());
        fd.append('cate_id', id);
        fd.append('content', delta);
        fd.append('state', state);
        // console.log(url);
        fd.append('cover_img', file);
        // 2.使用axios发起请求，调用发布文章的接口
        axios.post('/my/article/add', fd).then(({ data: res }) => {
            if (res.code === 0) {
                layer.msg(res.message)
                setInterval(() => {
                    location.href = '/article/art_list.html'
                }, 500);
                // 调用切换高亮到文章列表的高粱函数(index页面中定义的)
                window.parent.highlight('文章列表');
            };
        })

    })



})